import React, { Component } from 'react'
import { Modal, Form, Button } from 'antd'
import PropTypes from 'prop-types'
import _ from 'loadsh'
import style from './PartyShower.module.less'
const { Item } = Form
export default class PartyShower extends Component {
  state = {
    info: { tag: {} }
  }

  formatInfo () {
    const data = _.cloneDeep(this.props.data)
    if (data.tag) {
      try {
        data.tag = JSON.parse(data.tag)
      } catch (e) {
        console.warn(e)
      }
    }
    this.setState({
      info: data
    })
  }

  componentDidUpdate (prev) {
    if (this.props.data && prev.data !== this.props.data) {
      this.formatInfo()
    }
  }

  componentDidMount () {
    if (this.props.data) {
      this.formatInfo()
    }
  }

  render () {
    const info = this.state.info
    const { tag, type, subject_type: s, name } = info
    let nameTitle = '姓名'
    let legal = '法定代表人'
    if (s === '企业') {
      nameTitle = '公司名称'
    } else if (s === '非企业组织') {
      nameTitle = '组织名称'
      legal = '负责人'
    }
    return (
      <Modal
        title={`${type}详情`}
        open={this.props.visible}
        footer={<Button type='primary' onClick={() => this.props.hide()}>确定</Button>}
        onCancel={() => this.props.hide()}
        maskClosable={false}
      >
        <Form className={style.form}>
          <Item label='当事人主体'>
            <div className={style.text}>{tag && tag.subject_type_tag ? tag.subject_type_tag : '无'}</div>
          </Item>
          <Item label={nameTitle}>
            <div className={style.text}>{name || '无'}</div>
          </Item>
          <Item label='证件类型'>
            <div className={style.text}>{info.license_type || '无'}</div>
          </Item>
          <Item label='证件号码'>
            <div className={style.text}>{info.license || '无'}</div>
          </Item>
          {['企业', '非企业组织'].indexOf(s) !== -1 ? (
            <Item label={legal}>
              <div className={style.text}>{info.legal || '无'}</div>
            </Item>
          ) : null}
          <Item label='地址'>
            <div className={style.text}>{info.address || '无'}</div>
          </Item>
          <Item label='当事人所在地'>
            <div className={style.text}>{info.area || '无'}</div>
          </Item>
          <Item label='手机号码'>
            <div className={style.text}>{info.mobile || '无'}</div>
          </Item>
          <Item label='邮箱'>
            <div className={style.text}>{info.email || '无'}</div>
          </Item>
          <Item label='固定电话'>
            <div className={style.text}>{info.tel || '无'}</div>
          </Item>
        </Form>
      </Modal>
    )
  }
}

PartyShower.propTypes = {
  visible: PropTypes.bool,
  hide: PropTypes.func,
  data: PropTypes.object
}
PartyShower.defaultProps = {
  visible: false,
  hide: () => {},
  data: { type: '' }
}
